<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title" id="dbName">数据表</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>数据表</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            搜索：
            <select id="db-search-key">
                <option value="">-请选择-</option>
                <option value="db_name">表名</option>
                <option value="note">备注</option>
            </select>&emsp;
            <input id="db-search-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
            <button id="db-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="db-btn-export" class="layui-btn icon-btn"><i class="layui-icon">&#xe601;</i>导出</button>
        </div>

        <table class="layui-table" id="db-tab" lay-filter="db-tab"></table>
    </div>
</div>


<!-- 表格操作列 -->
<script type="text/html" id="db-tab-bar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details"><span class="layui-icon layui-icon-about"
                                                                                 title="详情"></span></a>
</script>

<script>
    layui.use(['form', 'table', 'util', 'config', 'admin'], function () {
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;

        let db = admin.getTempData("t_db");
        $("#dbName").html(db.dbName);
        // 渲染表格
        var renderTable = function () {
            table.render({
                elem: '#db-tab',
                // url: config.base_server + 'user_query.json',
                url: config.base_server + 'api-db/dbTable/getTableList',
                method: 'GET',
                where: {
                    access_token: config.getToken().access_token,
                    db: JSON.stringify(db)
                },
                page: true,
                cols: [[
                    {type: 'numbers'},
                    {field: 'tableName', title: '表名'},
                    {field: 'note', title: '备注'},
                    {align: 'center', toolbar: '#db-tab-bar', title: '操作', width: 150}
                ]]
            });
        };
        renderTable();
        // 工具条点击事件
        table.on('tool(db-tab)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'details') { // 查看表字段
                showEditModel(data);
            }
        });

        //显示表单弹窗
        var showEditModel = function (data) {
            admin.putTempData('t_db_table', data);
            var title = "数据表字段";
            admin.popupCenter({
                title: title,
                path: 'pages/business/table_field.html',
            });
        };
    });
</script>